<template>
  <el-dialog :visible="showRoleDialog" @close="cancelRole">
    <el-checkbox-group v-model="userInfo.roleIds" style="margin-bottom:'20px'">
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
        {{ item.name }}</el-checkbox
      >
    </el-checkbox-group>
    <el-row type="flex" justify="center">
      <el-button type="primary" @click="saveRole">确定</el-button>
      <el-button type="error" @click="cancelRole">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRoleList } from "@/api/setting";
import { getEmpInfo, setEmpInfo } from "@/api/employees";
export default {
  name: "role-per",
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    id: {
      require: true,
      type: String,
      defalt: ""
    }
  },
  data() {
    return {
      roleList: [],
      userInfo: {}
    };
  },
  methods: {
    //   获取用户信息
    async getEmpInfo(id) {
      let res = await getEmpInfo(id);
      this.userInfo = res.data;
    },
    // 获取所有的角色列表
    async getRoleList() {
      let res = await getRoleList({ page: 1, pagesize: 99999 });
      this.roleList = res.data.rows;
    },
    // 取消事件
    cancelRole() {
      this.roleIds = [];
      this.$emit("update:showRoleDialog", false);
    },
    // 确定事件
    async saveRole() {
      await setEmpInfo(this.userInfo);
      this.$message.success("添加成功！！！");
      this.cancelRole();
    }
  }
};
</script>

<style></style>
